.popup {
  position: fixed;
  visibility: hidden;
  z-index: 10002;
  animation-duration: 200ms;
}

.bottom-popup {
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(100%);
}

.bottom-show {
  animation-name: bottom-show;
  animation-fill-mode: forwards;
}

.bottom-hide {
  visibility: visible;
  transform: translateY(0);
  animation-name: bottom-hide;
  animation-fill-mode: forwards;
}

@keyframes bottom-show {
  to {
    visibility: visible;
    transform: translateY(0)
  }
}

@keyframes bottom-hide {
  to {
    visibility: hidden;
    transform: translateY(100%)
  }
}

.top-popup {
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
}

.top-show {
  animation-name: top-show;
  animation-fill-mode: forwards;
}

.top-hide {
  visibility: visible;
  transform: translateY(0);
  animation-name: top-hide;
  animation-fill-mode: forwards;
}

@keyframes top-show {
  to {
    visibility: visible;
    transform: translateY(0)
  }
}

@keyframes top-hide {
  to {
    visibility: hidden;
    transform: translateY(-100%)
  }
}


.left-popup {
  top: 0;
  left: 0;
  bottom: 0;
  transform: translateX(-100%);
}

.left-show {
  animation-name: left-show;
  animation-fill-mode: forwards;
}

.left-hide {
  visibility: visible;
  transform: translateX(0);
  animation-name: left-hide;
  animation-fill-mode: forwards;
}

@keyframes left-show {
  to {
    visibility: visible;
    transform: translateX(0)
  }
}

@keyframes left-hide {
  to {
    visibility: hidden;
    transform: translateX(-100%)
  }
}


.right-popup {
  top: 0;
  bottom: 0;
  right: 0;
  transform: translateX(100%);
}

.right-show {
  animation-name: right-show;
  animation-fill-mode: forwards;

}

.right-hide {
  visibility: visible;
  transform: translateX(0);
  animation-name: right-hide;
  animation-fill-mode: forwards;
}

@keyframes right-show {
  to {
    visibility: visible;
    transform: translateX(0)
  }
}

@keyframes right-hide {
  to {
    visibility: hidden;
    transform: translateX(100%)
  }
}